<!DOCTYPE html>
<!-- saved from url=(0068)https://www.html5tricks.com/demo/css3-loading-cool-styles/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>纯CSS3 Loading加载动画DEMO演示</title>

<link rel="stylesheet" href="loading.css">

<body>
<div class="wrapp">
<div class="load-1">
<p>Loader 1a</p>
<div class="k-line k-line1-1"></div>
<div class="k-line k-line1-2"></div>
<div class="k-line k-line1-3"></div>
</div>
</div>
<div class="wrapp">
<div class="load-1">
<p>Loader 1b</p>
<div class="k-line k-line2-1"></div>
<div class="k-line k-line2-2"></div>
<div class="k-line k-line2-3"></div>
</div>
</div>
<div class="wrapp">
<div class="load-1">
<p>Loader 1c</p>
<div class="k-line k-line3-1"></div>
<div class="k-line k-line3-2"></div>
<div class="k-line k-line3-3"></div>
<div class="k-line k-line3-4"></div>
<div class="k-line k-line3-5"></div>
</div>
</div>
<div class="wrapp">
<div class="load-1">
<p>Loader 1d</p>
<div class="k-line k-line4-1"></div>
<div class="k-line k-line4-2"></div>
<div class="k-line k-line4-3"></div>
<div class="k-line k-line4-4"></div>
<div class="k-line k-line4-5 "></div>
</div>
</div>
<div class="wrapp">
<div class="load-2">
<p>Loader 2a</p>
<div class="k-line k-line5-1"></div>
<div class="k-line k-line5-2"></div>
<div class="k-line k-line5-3"></div>
</div>
</div>
<div class="wrapp" style="width:250px">
<div class="load-2">
<p>Loader 2b</p>
<div class="k-line k-line6-1"></div>
<div class="k-line k-line6-2"></div>
<div class="k-line k-line6-3"></div>
<div class="k-line k-line6-4"></div>
<div class="k-line k-line6-5"></div>
</div>
</div>
<div class="wrapp" style="width:250px">
<div class="load-2">
<p>Loader 2c</p>
<div class="k-line k-line6b-1"></div>
<div class="k-line k-line6b-2"></div>
<div class="k-line k-line6b-3"></div>
<div class="k-line k-line6b-4"></div>
<div class="k-line k-line6b-5"></div>
</div>
</div>
<div class="wrapp">
<div class="load-3">
<p>Loader 3a</p>
<div class="k-line k-line7-1"></div>
<div class="k-line k-line7-2"></div>
<div class="k-line k-line7-3"></div>
</div>
</div>
<div class="wrapp">
<div class="load-3">
<p>Loader 3b</p>
<div class="k-line k-line8-1"></div>
<div class="k-line k-line8-2"></div>
<div class="k-line k-line8-3"></div>
</div>
</div>
<div class="wrapp">
<div class="load-3">
<p>Loader 3c</p>
<div class="k-line k-line9-1"></div>
<div class="k-line k-line9-2"></div>
<div class="k-line k-line9-3"></div>
<div class="k-line k-line9-4"></div>
</div>
</div>
<div class="wrapp">
<div class="load-3">
<p>Loader 3d</p>
<div class="k-line k-line9b-1"></div>
<div class="k-line k-line9b-2"></div>
<div class="k-line k-line9b-3"></div>
<div class="k-line k-line9b-4"></div>
<div class="k-line k-line9b-5"></div>
</div>
</div>
<div class="wrapp">
<div class="load-3">
<p>Loader 3e</p>
<div class="k-line k-line11-1"></div>
<div class="k-line k-line11-2"></div>
<div class="k-line k-line11-3"></div>
<div class="k-line k-line11-4"></div>
<div class="k-line k-line11-5"></div>
</div>
</div>
<div class="wrapp" style="width:700px">
<div class="load-3">
<p>Loader 3f</p>
<div class="k-line2 k-line12-1"></div>
<div class="k-line2 k-line12-2"></div>
<div class="k-line2 k-line12-3"></div>
<div class="k-line2 k-line12-4"></div>
<div class="k-line2 k-line12-5"></div>
<div class="k-line2 k-line12-6"></div>
<div class="k-line2 k-line12-7"></div>
<div class="k-line2 k-line12-8"></div>
</div>
</div>
<div class="wrapp">
<!-- Loader 4 don't work on firefox because of the border-radius and the "dashed" style. -->
<div class="load-4">
<p>Loader 4</p>
<div class="k-ring-1"></div>
</div>
</div>
<div class="wrapp">
<div class="load-5">
<p>Loader 5a</p>
<div class="k-ring-2">
	<div class="k-ball-holder">
		<div class="k-ball1a"></div>
	</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-5">
<p>Loader 5b</p>
<div class="k-ring-2" style="border-color:#FFFFFF;">
	<div class="k-ball-holder">
		<div class="k-ball1b"></div>
		<div class="k-ball2a"></div>
	</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-5">
<p>Loader 5c</p>
<div class="k-ring-2" style="border-color:#3F51B5;">
	<div class="k-ball-holder2">
		<div class="k-ball1c"></div>
		<div class="k-ball3"></div>
		<div class="k-ball4"></div>
	</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-5">
<p>Loader 5d</p>
<div class="k-ring-2" style="border-color:#000000;">
	<div class="k-ball-holder2">
		<div class="k-ball1d"></div>
		<div class="k-ball2b"></div>
		<div class="k-ball5a"></div>
		<div class="k-ball6a"></div>
	</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-5">
<p>Loader 5e</p>
<div class="k-ring-2" style="border:hidden;">
	<div class="k-ball-holder2">
		<div class="k-ball1e"></div>
		<div class="k-ball2c"></div>
		<div class="k-ball5b"></div>
		<div class="k-ball6b"></div>
	</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-5">
<p>Loader 5f</p>
	<div class="k-ball-holder3">
		<div class="k-ball7a"></div>
		<div class="k-ball7b"></div>
		<div class="k-ball7c"></div>
		<div class="k-ball7d"></div>
	</div>
</div>
</div>
<div class="wrapp">
<div class="load-6">
<p>Loader 6</p>
<div class="k-letter-holder">
	<div class="k-letter-1 k-letter">L</div>
	<div class="k-letter-2 k-letter">o</div>
	<div class="k-letter-3 k-letter">a</div>
	<div class="k-letter-4 k-letter">d</div>
	<div class="k-letter-5 k-letter">i</div>
	<div class="k-letter-6 k-letter">n</div>
	<div class="k-letter-7 k-letter">g</div>
	<div class="k-letter-8 k-letter">.</div>
	<div class="k-letter-9 k-letter">.</div>
	<div class="k-letter-10 k-letter">.</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-6">
<p>Loader 6</p>
<div class="k-letter-holder">
	<div class="k-letter-1b k-letter">L</div>
	<div class="k-letter-2b k-letter">o</div>
	<div class="k-letter-3b k-letter">a</div>
	<div class="k-letter-4b k-letter">d</div>
	<div class="k-letter-5b k-letter">i</div>
	<div class="k-letter-6b k-letter">n</div>
	<div class="k-letter-7b k-letter">g</div>
	<div class="k-letter-8b k-letter">.</div>
	<div class="k-letter-9b k-letter">.</div>
	<div class="k-letter-10b k-letter">.</div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-7">
<p>Loader 7a</p>
<div class="k-square-holder">
	<div class="k-square"></div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-7">
<p>Loader 7b</p>
<div class="k-square-holder">
	<div class="k-square"></div>
</div>
<div class="k-square-holder">
	<div class="k-square2"></div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-7">
<p>Loader 7c</p>
<div class="k-square-holder2">
  <div class="k-square3 k-square3a"></div>
  <div class="k-square3 k-square3b"></div>
  <div class="k-square3 k-square3c"></div>
  <div class="k-square3 k-square3d"></div>
</div>
</div>
</div>
<div class="wrapp">
<div class="load-7">
<p>Loader 7d</p>
<div class="k-square-holder2">
  <div class="k-square4 k-square4a"></div>
  <div class="k-square4 k-square4b"></div>
  <div class="k-square4 k-square4c"></div>
  <div class="k-square4 k-square4d"></div>
</div>
</div>
</div>		
<div class="wrapp">
<div class="load-8">
<p>Loader 8a</p>
<div class="k-line k-line10"></div>
</div>
</div>
<div class="wrapp">
<div class="load-8">
<p>Loader 8b</p>
<div class="k-line k-line10b"></div>
</div>
</div>
<div class="wrapp">
<div class="load-9">
<p>Loader 9</p>
<div class="k-spinner">
	<div class="k-bubble-1"></div>
	<div class="k-bubble-2"></div>
 </div>
</div>
</div>
<div class="wrapp">
<div class="load-10">
<p>Loader 10</p>
<div class="k-bar"></div>
</div>
</div>
<div class="wrapp">
<div class="load-11">
<p>Loader 11a</p>
<div class="k-loader k-small"></div>
</div>
</div>
<div class="wrapp">
<div class="load-12">
<p>Loader 11b</p>
<div class="k-loader"></div>
</div>
</div>
<div class="wrapp">
<div class="load-13">
<p>Loader 11c</p>
<div class="k-loader k-circle-before"></div>
</div>
</div>
<div class="wrapp">
<div class="load-14">
<p>Loader 11d</p>
<div class="k-loader k-circle-after"></div>
</div>
</div>
<div class="wrapp">
<div class="load-15">
<p>Loader 11e</p>
<div class="k-loader k-circle"></div>
</div>
</div>
</div>



